Урок 19 – Продолжаем настраивать UI

Первым делом в этом уроке мы начнем делать спидометр. Но прежде чем его делать, нам надо выяснить с какой скоростью двигается наш объект.

Давайте создадим новую группу.

Далее создадим переменную сцены, где будет хранится текущая скорость Player.

Т.е. мы сперва даем имя переменной, затем чтоб она была равна какому-то значению, и в качестве значения выбираем объект Player, через точку выбираем его физические свойства и далее ищем свойство LinearVelocity() т.е. линейная скорость. Только так как мы двигаемся вверх, значение по оси Y будет отрицательным. Чтобы это исправить, надо просто умножить значение на -1.

Далее создадим текстовый объект для отображения этой переменной. Для этого просто копируем объект RacerTimer, переименовываем его в PlayerSpeed, добавляем его на сцену и переносим в нижнюю часть экрана.

Убедитесь, что этот объект находится на слое UI.

Теперь, как в предыдущем разе, меняем текст объекту, только теперь на значение переменной.

Проверяем. Давайте сделаем текст скорости и таймера белыми.

Но все равно, когда скорость отображается слишком большими цифрами, то это тяжело воспринимать. Чтобы это исправить, просто разделим скорость на 10.

Теперь я хочу чтобы над цифрой была дугообразная шкала, которая будет увеличиваться от увеличения скорости Player. Для этого используем так называемый объект для рисования.

Объект для рисования (Shape Painter) позволяет рисовать простые фигуры на экране с помощью событий.

Зададим название объекту, а остальные свойство оставим по умолчанию.

Когда вы перетащите объект на сцену, то увидите просто значок-заполнитель. Однако он не отображается в самой игре.

Чтобы заставить его что-то делать, нам надо создать событие, которое что-то нарисует.

Т.е. выбираем наш объект ищем группу Drawing (рисование), и выбираем круг. В X и Y позиции ставим 0. Это значит, что круг появится именно в том месте, куда мы перенесли объект. Дело в том, что когда мы задавали объекту для рисования по умолчанию, там была данная галочка:

Это означает рисовать фигуры объекты относительно положения нашего объекта. Т.е. значения 0 в x и y означают именно то место , где находится наш объект. Если убрать галочку, то позиция 0 в x и y будем находится в левом верхнем углу экрана.

Запускаем игру и видим круг со параметрами, которые мы задали..

Но это не совсем то, что я хотел, давайте изменил круг на дугу.

В параметрах укажем, чтобы дуга начиналась от 180 градусов до 360. Anticlockwise – это движение против часовой стрелочки. По умолчанию стоит “нет”. А Close Path просто рисует границу, так сказать, внутри дуги, чтобы весь объект имел границу.

Без Сlose Path.

C Сlose Path.

Но оставим значение по умолчанию, т.е. без Сlose Path.

Теперь изменим значения по умолчанию.

Т.е. мы задали новый цвет обводке и сильно ее увеличили в толщине, а внутренний цвет (т.е. белый), сделали полностью прозрачным.

Проверяем.

Это уже чуть больше похоже на спидометр. Давайте теперь добавим эффект свечения этому объекту.

Выбираем черный цвет, а остальные настройки оставляем по умолчанию.

Уже гораздо лучше. Теперь я хочу увеличит радиус круга со 100 до 150.

И далее надо переместить дугу так, чтобы цифра была внутри нее. Также проследите, чтобы это дуга была на слое UI.

Далее сделаем нашу дугу более подвижной – вместо 360 градусов укажем чтобы к начальной точке в 180 градусов прибавлялась скорость Player.

Но дуга будем увеличиваться слишком быстро.

Давайте разделим наше значение скорости, допустим, на 6.

Готово:).

Далее я хочу создать визуальный индикатор, чтобы игроки видели как далеко они продвинулись по уровню.

Для начала, давайте загрузим новое расширение.

Чтобы использовать его, необходимо создать новый объект для рисования (назовем его ProgressTracker), и в разделе Behaviors выбираем наше расширение.

Как видите, здесь просто множество опций, но пока, давайте посмотрим как он выглядит по умолчанию.

Т.е. это обычный слайдер. Давайте также создадим цифру, которая будет отображать процент прогресса игрока. Для этого просто скопируем объект скорости игрока и переименуем его.

И изменю значение заполнителя в процентах.

Далее перенесу наш новый объект на сцену.

Теперь изменим внешний вид слайдера.

Добавим эффект свечения черного цвета.

Запускаем игру и смотрим что получилось.

Далее мы хотим чтобы этот ползунок перемещался в зависимости от процента ниже, который в свою очередь зависит от прохождения объектом Player трассы.

Создаем новую группу событий с именем Progress Tracker, чтобы вычислить длину трассы. Для этого надо узнать расстояние между объектами StartLine и Finishline. Чтобы вычислить длину трассы необходимо отнять от позиции Y у StartLine позицию Y у FinishLine. Получается 256 – (-18900) = 19 156.

Затем надо узнать сколько прошел объект Player. Для этого отнимем позиции Y у Startline и Player.

Далее осталось узнать сколько процентов наш объект прошел. Для этого надо расстояние которое прошел наш объект разделить на расстояние всей трассы и умножить полученное число на 100.

И изменим текст у объекта PercentComplete.

Запустив игру мы столкнемся с одной проблемой – до того как объект достигнет StartLine, у нас будут отрицательные проценты, что выглядит не очень. Чтобы этого избежать мы можем воспользоваться функцией clamp, которая может обрезать значение.

Получается в первом параметре мы записываем число, которое хотим обрезать, затем минимальное значение для обрезки и максимальное. Все что находится за этими числами будет обрезано.

Теперь осталось сделать, чтобы ползунок двигался относительно процентов.

Так как максимальное значение ползунка 1, то мы должны наши проценты разделить на 100.

Проверяем. Все должно работать:)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *